// 查询预约
// React-Native function组件
import React, {useEffect} from 'react';
import {View, Text, FlatList} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {useStyleConstants} from '../resources/StyleConstants';
import {useResponsive} from 'react-native-responsive-hook';
import ColorButton from '../components/ColorButton';
import Colors from '../resources/Colors';
import {get} from '../http/http';
import {SegmentedView} from 'teaset';
import config from '../config/config';

export default function ReserveQueryScreen({navigation}) {
  const [tableData, setTableData] = React.useState([{}, {}]);
  const [deviceData, setDeviceData] = React.useState([]);
  const {STYLES} = useStyleConstants();
  const {wp, hp, rem} = useResponsive();

  useEffect(() => {
    const loadDevices = async () => {
      const result2 = await get(
        '/assets/materialCabinet/api/getMaterialCabinetAssetsList',
        {page: 1, limit: 999, deviceId: config.DEVICE_ID},
      );
      setTableData(result2.data.data);
      // const {data} = await get(
      //   '/assets/assetsWarehousing/api/getAssetsWarehousingPage',
      //   {page: 1, limit: 999, assetsStateS: '0,7', grantWay: '3'},
      // );
      // setTableData(data.data);
      const result = await get(
        '/assets/equipmentApi/api/getEquipmentModelListApi',
        {pageNum: 1, pageSize: 999, deviceId: config.DEVICE_ID},
      );
      setDeviceData(result.data.data);
    };
    loadDevices();
  }, []);

  const renderItem = ({item, index}) => {
    const textStyle = {
      flex: 2,
      textAlign: 'center',
      color: '#333',
      fontSize: STYLES.TEXT_SMALL_SIZE,
    };
    return (
      <View
        style={{
          height: hp(5),
          marginHorizontal: '0%',
          width: '100%',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <Text style={{...textStyle, flex: 1}}>{index + 1}</Text>
        <Text style={{...textStyle, textAlign: 'left'}}>{item.assetsName}</Text>

        <Text style={{...textStyle}}>{item.warehousingSum}</Text>
        <Text style={{...textStyle}}>{item.relNum}</Text>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            flex: 3,
            justifyContent: 'space-around',
          }}>
          <ColorButton
            title="预约取件"
            backgroundColor={Colors.primaryColor}
            fontSize={rem(7)}
            height={hp(3)}
            containerStyle={{
              paddingHorizontal: wp(4),
            }}
            onPress={() => reserve && reserve(item.warehousingId)}
          />
        </View>
      </View>
    );
  };

  const renderItem2 = ({item, index}) => {
    const textStyle = {
      flex: 2,
      textAlign: 'center',
      color: '#333',
      fontSize: STYLES.TEXT_SMALL_SIZE,
    };
    return (
      <View
        style={{
          height: hp(5),
          marginHorizontal: '0%',
          width: '100%',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <Text style={{...textStyle, flex: 1}}>{index + 1}</Text>
        <Text style={{...textStyle, textAlign: 'left'}}>{item.modelName}</Text>

        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            flex: 3,
            justifyContent: 'space-around',
          }}>
          <ColorButton
            title="预约取件"
            backgroundColor={Colors.primaryColor}
            fontSize={rem(7)}
            height={hp(3)}
            containerStyle={{
              paddingHorizontal: wp(4),
            }}
            onPress={() => reserve2 && reserve2(item.modelId)}
          />
        </View>
      </View>
    );
  };

  const reserve = warehousingId => {
    navigation.navigate('DeviceReserveScreen', {
      warehousingId: warehousingId,
    });
  };

  const reserve2 = modelId => {
    navigation.navigate('DeviceReserveScreen', {
      modelId: modelId,
    });
  };
  const renderHeader = () => {
    const textStyle = {
      flex: 2,
      textAlign: 'center',
      color: '#fff',
      fontSize: STYLES.FOURTH_FONT_SIZE,
    };
    return (
      <View
        style={{
          height: hp(5),
          marginHorizontal: '0%',
          width: '100%',
          marginTop: '0%',
          backgroundColor: '#12CAA8',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <Text style={{...textStyle, flex: 1}}>序号</Text>
        <Text style={{...textStyle}}>设备名称</Text>
        <Text style={{...textStyle}}>数量</Text>
        <Text style={{...textStyle}}>柜格号</Text>
        <Text style={{...textStyle, flex: 3}}>操作</Text>
      </View>
    );
  };
  const renderHeader2 = () => {
    const textStyle = {
      flex: 2,
      textAlign: 'center',
      color: '#fff',
      fontSize: STYLES.FOURTH_FONT_SIZE,
    };
    return (
      <View
        style={{
          height: hp(5),
          marginHorizontal: '0%',
          width: '100%',
          marginTop: '0%',
          backgroundColor: '#12CAA8',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <Text style={{...textStyle, flex: 1}}>序号</Text>
        <Text style={{...textStyle}}>型号名称</Text>
        <Text style={{...textStyle, flex: 3}}>操作</Text>
      </View>
    );
  };
  return (
    <View style={{flex: 1}}>
      <Text
        style={{
          fontSize: STYLES.THIRD_FONT_SIZE,
          margin: STYLES.MARGIN_SPACE_2,
        }}>
        智能柜当前库存查询
      </Text>
      <SegmentedView
        style={{flex: 1}}
        indicatorLineColor={'#12CAA8'}
        barStyle={{fontSize: rem(8)}}>
        <FlatList
          title={'当前设备'}
          titleStyle={{fontSize: STYLES.HALF_FONT_SIZE}}
          activeTitleStyle={{fontSize: STYLES.HALF_FONT_SIZE, color: '#12CAA8'}}
          style={{flex: 1, width: '100%'}}
          data={tableData}
          ItemSeparatorComponent={() => (
            <View style={{height: 1, backgroundColor: '#e3e3e3'}} />
          )}
          renderItem={renderItem}
          ListHeaderComponent={renderHeader}
          keyExtractor={item => item.warehousingId}
          extraData={tableData}
          onScroll={() => {}}
        />
        <FlatList
          title={'设备型号'}
          titleStyle={{fontSize: STYLES.HALF_FONT_SIZE}}
          activeTitleStyle={{fontSize: STYLES.HALF_FONT_SIZE, color: '#12CAA8'}}
          style={{flex: 1, width: '100%'}}
          data={deviceData}
          renderItem={renderItem2}
          ItemSeparatorComponent={() => (
            <View style={{height: 1, backgroundColor: '#e3e3e3'}} />
          )}
          ListHeaderComponent={renderHeader2}
          keyExtractor={item => item.modelId}
          extraData={deviceData}
          onScroll={() => {}}
        />
      </SegmentedView>
    </View>
  );
}
